import React from 'react';
import { Tabs } from 'antd';
import classNames from 'classnames';
import TabBarTabsNode from 'rc-tabs/lib/TabBarTabsNode';

const CustomTabs = ({ children, className, layout, ...props }) => {
  const prefixCls = 'x-tabs';
  const classes = classNames(className, {
    [`${prefixCls}-fixed`]: layout === 'fixed',
  });
  return (
    <Tabs
      {...props}
      prefixCls={prefixCls}
      className={classes}
      renderTabBar={props => {
        const { panels } = props;

        const newProps = {
          ...props,
          panels: panels.map(panel => {
            const { tab } = panel.props;
            if (typeof tab === 'string') {
              return React.cloneElement(panel, {
                ...panel.props,
                tab: <em>{tab}</em>,
              });
            }
            return panel;
          }),
        };
        return (
          <div className={`${prefixCls}-nav`}>
            <TabBarTabsNode {...newProps} />
          </div>
        );
      }}
    >
      {children}
    </Tabs>
  );
};
CustomTabs.TabPane = Tabs.TabPane;

export default CustomTabs;
